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A Software Design Manifesto 


“The daily experience of using computers far too often is still 
fraught with difficulty, pain, and barriers for most people." 


Mitch Kapor, Lotus 




Poor Usability 

IT departments neglect usability in favor of cost 
— Samsung survey 
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Poor Usability 

What if software engineers developed 
user interfaces ... 







Current Selection 

VGA Display (DDC) 

1 15£x 870, 75Hz 
Millions of Colors 


identity 


Details 




ATI Display Control Panel 
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"User Interface Design" 


http://www.dilbert.com/strips/comic/2002-09-23/ 


http://www.dilbert.com/strips/comic/2002-09-24/ 


http://www.dilbert.com/strips/comic/2001-04-14/ 
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Features 


Complexity causes 50% of product returns 


Elke den Ouden, TU Eindhoven 




Featuritus? 























Features 



Engineers, scientists, programmers ... 

are not representative of normal people 



© ThinkGeek 
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Google! Search Engine 



Search the web using Google! 

10 results t % ] (^Google Search j (j'm feeling lucky . 

Index contains -25 million pages (soon to be muck bigger) 

About Goog le! 

Stanford Search Linux Search 
Get Google! updates monthly! 

[your e-mail I f Subscribe ^ Archive 

Copyright ©1997 § Stanford University 

























"Googley User Experience" 



Link: 

http://www.google.com/corporate/ux.html 
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Web 


Images 


Videos 


Maos 


News 


Books Gmail more ▼ 


Canada 


iGoogle | Search settings | Sign in 

Hi 

A faster way to browse the web 


Install Google Chrome 


Advanced search 
Language tools 


Google Search 


I'm Feeling Lucky 


Google.ca offered in: francais 


Advertising Programs Business Solutions About Google GotoGoogle.com 

© 2011 ■ Privacy 
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Usability 

Some approaches: 
focus on user tasks 

conduct studies of users 

get feedback from users during design 

see good and bad examples 

use user interface design guidelines 

employ graphic design 


apply principles from psychology & sociology 



"Surprises" 

Do we really need vowels? 

H*p* y* • c*n r**d th*s s*nt*nc* w*th**t th* v*w*ls. 


Cn y rd ths qstn? 
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"Surprises" 


Do we really need to spell correctly? 


"Aoccdrnig to rscheearch at an Elingsh uinervtisy, it 
deosn't mttaer in waht oredr the Itteers in a wrod are, the 
olny iprmoetnt tihng is taht the frist and Isat Itteer is at the 
rghit pclae." 


15 



"Surprises" 


Link: 

http://web.princeton.edu/sites/opplab 

/papers/Diemand-Yauman_Oppenheimer_2010.pdf 


Disfluency through harder-to-read fonts can be better for long¬ 
term learning. 
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Human Computer Interaction 

C Many interaction styles over the years: 

rewiring 
punched cards 
programming 
command line 
choices and prompts 
forms 

graphical user interface 
point and click 
touch-based 
gesture-based 
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Graphical User Interface 

Underlying principles: 
user in control 

• reduce certain “modes" that overly limit the 
user 

manipulate objects 

• syntax is select (noun), then act (verb) 
visibility of the objects of interest 

• exploit recognition, not recall 

• affordance (appearance suggests form of 
interaction) 
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Graphical User Interface 

Underlying principles: 

incremental action with rapid feedback 

• show objects as they are moved or resized 
reversible actions (instant undo) and canceling 

• encourage safe exploration 
every choosable action is legal 

• gray out invalid choices 
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Graphical User Interface 

Support learning through metaphors: 

familiar settings to teach new concepts 

• desktop, menus, rooms, shopping carts 
metaphors can only go so far 

• trash can on the desktop? 
carried to non-intuitive situations 

• drag disk icon to trash to unmount it? 
cultural differences 

• menus imply the availability of choice 
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© General Magic 


® Hallway 5:19 p.m. i. » 


[Ijp Downtown 
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Storeroom 


Game room 


•y.tiiikikkikkikki^**:*: 
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0 Downtown 5:25 pm. 1 . 11 


Hjr" Hallway 
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© Isys Information Architects 
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Exercise 


Find user interface problems. 


nno 

Book a Flight 


Book Flights 




Departure Date 

Morning * I Jan 


One way: LJ 
Round trip: 


From To 


Arrival Date 

Morning i I Jan til t 

/ K-l ___^ S_ 


(enter IATA airport code) 

Fair class: 

{ ECONOMY t 1 


ft of Passengers: 

(up to 9) 



Execute Cancel) 


A 
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Consistency, Consistency, Consistency 


Principles: 

predictable 


• what comes next is clear from what came 
before 

generalizable 

• specific cases extend to new situations 


stable 


• consistently placed targets in the user interface 
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Consistency, Consistency, Consistency 


Lexical consistency: 

consistent with common usage 

• e.g., left = less, right = more 
consistent abbreviation rules 

• e.g., Jan, Feb, Mar, etc. (all equal length) 
symbols used consistently 

• e.g., ellipsis (...) to bring up a dialog from a 
button 
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Consistency, Consistency, Consistency 


Syntactic consistency: 

e.g., consistent order of menus and menu items 



TextEdit 


File 


Edit Format Window 


Open Recent 

► 

Oose 

sew 

Save 


Save As... 

o^s 

Save As PDF... 


Save All 


Revert to Saved 


Attach Fifes... 

OftA 

Show Properties 

T^P 

Page Setup... 

OftP 

Print... 

3£P 
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Platform 


IP Q/5 



Open 
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Users 
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! A 


T DEVICES 
JL Mac 


* kenw 


L I iDisk 
|_i References 

PLACES 

: A Applications 
^ kenw 
■\ Applications 
Documents 


— W 


Plain Text Encoding: Automatic 


_Ignore rich text commands 


Cancel ' Open 


A 


standard dialogs, 
sheets, and palettes 
in each platform 


Consistency 

Q \ , J ~'' _ Fonts _ 


Monaco 

Monaco 10.0 pt. 
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Collection 


Family 


Typeface 


Size 


All fonts 

Microsoft Sans Serif 

A 

Regular 
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English 


Minion Pro 

T 
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* 

Favorites 


Mistral 
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Recently Used 


Modern No. 20 
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Fixed Width 


Mona Lisa Solid ITC T 
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Fun 


Monaco 
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Modem 


MS Gothic 
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MS Mincho 





Traditional 
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Web 


MS PMincho 
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Windows Office Comp 


MS Reference Sans Sei 
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Printer: Generic PostScript 


]0 


Presets: Standard 


I] 


Copies: 1 


’■Z Collated 


Pages: 0AII 


(J-Frorn: 1 


Paper Size: US Letter 


to: 1 

2L.59 by 27=94 cm 


Orientation: 


TextEdit 


Print header and footer 
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Cancel Pri nt 
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Graphic Design 

Goal: 

guide the user's attention and convey information clearly 
about the system's functionality and state 


i.e. ; use layout and color to organize and communicate 
economically 
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Graphic Design Principles 

Organize for neatness: 

use grids and alignment, balance and symmetry, nothing 
placed arbitrarily 


Spelling: EngEtsh (USA) 


Not in Dictionary: 

Change to: 
Suggestions: 


abc 


abs 


Ign Dre 


abs 

arc 

back 

art 


: 


f 

V 


Change 


f 

V 


Add 


Ignore All 


Change Afl 


J 


Suggest 


j 


AutoCorrect 




Clo ie 




Add words to: 


Custom Dictionary 
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Graphic Design Principles 

Organize for grouping: 

e.g., use labels, separators, proximity 



Appearance 

a 


Appearance: Graphite £ 

For the overall look of buttons, menus, and windows 

Highlight color: Graphite £ 

For selected text 

Place scroll arrows: 0Together 

O' At top and bottom 

Click in the scroll bar to: ©Jump to the next page 

Qjump to the spot that’s clicked 

Use smooth scrolling 

'*5 Double-click a window's title bar to minimize 


Number of recent items: 


None 

A 

T 


None 

K _ 

A 

T 


None 


Applications 

Documents 

Servers 


0 Use LCD font smoothing when available 
Turn off text smoothing for font sizes 8 £ 1 and smaller 
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Graphic 


Design Principles 


Organize for 
grouping: 

e.g., use tabs, 

indentation, 

borders 


AutoCorrect: English (US) 



Back/Forward Show A 1 


AuSomatically correct spelling and formatting as you type 


a 

Search Word Preferences 


AutoCorrect Math AutoCorrect AutoFormat as You Type AutoText 

V* 5how AutoCorrect smart button 

Correct TWo INitial CApitals 
□ Capitalize first letter of sentences 
Capitalize names of days 
"f Capitalize first letter of table cells 

iv? Replace text as you type Exceptions 

Replace: With: 


■—> 

ail 


© 

T 


© LI 

:-E 

© 

T 


Add i. Delete 


Automatically use suggestions from the spelling checker 


Description of preference 
AutoCorrect 

Use AutoCorrect to correct text and formatting as you type. 


Cancel OK 
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Graphic Design Principles 

Organize for grouping: 

use repetition to show similarity and unity 
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Plain Text Encoding: Unicode (UTF-8} 


If no extension is provided,, use |l .txt". 


New Folder 


Cancel Save 
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Graphic Design Principles 

Organize for order and flow: 

arrange elements in sequence to efficiently guide the 
user's eyes and support the task 






M 


a 


Paragraph 

Bullets and Numbering 

Columns 

Text Fill 

Text Line 

Text Shadow 

Text Clow & Soft Edges 

Text Reflection 

Text 3-D Format 

Text 3-D Rotation 

Text Box 


Format Text 


Font Character Spacing 


Font: 


Gilt Sans MT (Theme Body) 


Font style: 
t ' Regular 


Font size: 
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0 


Color & Underline 


Font color: 


Underline style: 


Underline color: 


(None) 


0 


Basic Effects 


□ 5trike through 

Double strikethrough 


_! Superscript 
Subscript 


Offset: 0% 


T 


2 Small caps 
Q All caps 

□ Equalize character height 


" Cancel " OK 


Mail Merge Manager 
L, Select Document Type 

Create New T 

2. Select Recipients List 
Get List T ^ 

3. Insert Placeholders 

Drag placeholders into document: 

, Contacts "Mo re 

No Data (Choose a data source) 


L. 

1 

4. Filter Recipients 


Options.,. 


5. Preview Results 



as w < 

M {a} 

6. Complete Merge 

V* V; ~U7r ■ 

Ail 

* 

From To: 
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Graphic Design Principles 

Economize for clarity: 

get the most out of a minimal set of cues 


Print 


Generic PostScript 

13 S 

Standard 

k _ 

13 


Layout 

i 


Pages per Sheet: 4 


i 

3 

2 

4 


Layout Direction: 


(4 


AJ 



None 

s_ 


A 

Off 


A 
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Flip horizontally 


© c pdf * ) C Z review 


Cancel Print 

^\ ___/ 


36 

























































Graphic Design Principles 

Economize for quick recognition: 

use icons, pictures, previews, and affordances to remind 


^ ^ 


Print Si Fax 



Printers 


Generic PostScript 

- « Idle, Last Used 

i UAAth 326 HP SIS. 

4# w Idle 


UAAth 326 Xerox 5.,. 
s Idle 





+ - 




UA Ath 326 Xerox 5755 IPP 


Open Print Queue.,, 


r 

v 


Options & Supplies.,, ' 


Location; UA 

Kind: XeroxWorkCentre 5755 r 1,2.0 
Status; Idle 


□ Share this printer on the network (^Sharing Preferences - ") 




■Default printer; Last Printer Used 


Default paper size; US Letter 


3 


Click the lock to prevent further changes. 
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Graphic Design Principles 

Economize for reducing clutter: 
focus on the essentials 


r\ 


Network 



Locat i on: Automatic 
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© 

© 

m 


rPort 

Con nected 


Bluetooth DUN 

Not Connected 

Ethernet 

Not Connected 

FireWire 

Not Connected 


- # 



4 a ¥ 




Status: Connected Turn Air Fort Off 

AirPort is connected to Real and has tine IP 
address 10,0, L, 2, 


Network Name: Real 


Ask to join new networks 


Known networks will be joined automatically. 
If no known networks are available, you will 
be asked before joining a new network. 


802.IX: UWS 


c 


Connect 




0 Show AirPort status in menu bar 


Advanced.., ? 


Click the lock to prevent further changes. 


Assist me... Revert 


Apply 
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Graphic Design Principles 

Economize for streamlining tasks: 
simplify the most common case 
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Graphic Design Principles 

Distinctiveness: 

if two nearby things are not the "same", 
make them look different 


• position 

• size 

• shape 

• color 

• lightness 

• texture 

• etc. 
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Graphic Design Principles 

Distinctiveness: 

the eye is attracted by 


t is isolated 

color versus non-color 
saturated colors 
different typefaces 

bigger elements 
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Using Color 

Tips: 

be selective 

• maximize the effect when used minimally 
be consistent in meaning 

• test passed, program stopped 



avoid blue for foreground elements 









Using Color 

Tips: 

in an alert, don't highlight the"dangerous" choice in red 


avoid overuse of too many saturated colors 

can cause visual fatigue 
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Using Color 

Tips: 

use foreground and background colors that contrast well 
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Using Color 

Tips: 

combine color with shape, brightness, position, text labels, 
etc. for redundancy 

• because of color blindness or poor vision 
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Bad Designs 
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Interface Hall of Shame 


Link: 

http://homepage.mac.com/bradster/iarchitect/shame.htnn 
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Poor Use of Tabs 
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Poor Use of Tabs 



Contacts 


Name 



1 City ] 

State | 

Zip Code | 

T elephone | 

Fax | 

Type ] 


Date 


1 Name 

City 

State 

Zip Code 

Primary Telephone 

Albert Collins 

New Orleans 

LA 

43422 

(8091 555-1212 

Hound Dog Taylor 

Springfield 

OH 

01844 

(212] 555-1212 

James Cotton 

Nashville 

TN 

22321 

(410] 555-1212 

Koko T aylor 

Memphis 

TN 

34212 

(321 ] 100-9099 

Professor Longhair 

Chicago 

IL 

G2000 

(G03J 555-1212 
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Poor Use of Visual Elements 



§ MIDI Orchestrator - (Untitled) 



File 


Options Help 


□ EIZIQIZIIZIIZIIZIIZI 


m 

m 



. f 

^ 50^9 
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Bad Designs 

Link: 

http://www.baddesigns.com/ 



Visibility Problem 



© baddesigns.com 
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Affordance Problems 




© baddesigns.com 
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Mapping Problems 



© baddesigns.com 
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Distinctiveness Problems 




© baddesigns.com 























Proximity Problems 



© baddesigns.com 












































More Information 


Books: 

Java Look and Feel Design Guidelines 

• Sun Microsystems 

• Addison-Wesley, 2001 

Interaction Design 

• J. Preece, Y. Rogers, and H. Sharp 

• Addison-Wesley, 2002 



More Information 


Books: 

Graphic Design for Electronic Documents and User 
Interfaces 


• A. Marcus 

• ACM Press, 1992 


Designing Visual Interfaces 

• K. Mullet & D. Sano 

• Prentice-Hall, 1995 



More Information 


Books: 

The Essential Guide to User Interface Design 

• W.O. Galitz 

• Wiley, 2002 

One-Minute Designer 

• R.C. Parker 

• MIS Press, 1997 
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More Information 



Links: 

User Interface Design for Programmers 

• http://www.joelonsoftware.com/uibook 
/fog0000000249.html 
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